<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="flexible.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#box{
				width: 10rem;
			}
			.lis{
				list-style: none;
				float: left;
				width: 20%;
				height: 100px;
				background: blue;
				color: #FFFFFF;
			}
			.lischeck{
				background: red;
			}
			#content>.content_child{
				display: none;
			}
			#content>.content_child:first-child{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="lis lischeck" data-menu="0">0</li>
				<li class="lis" data-menu="1">1</li>
				<li class="lis" data-menu="2">2</li>
				<li class="lis" data-menu="3">3</li>
				<li class="lis" data-menu="4">4</li>
				
			</ul>
			<div id="content">
				<div class="content_child">第一个Div</div>
				<div class="content_child">第二个Div</div>
				<div class="content_child">第三个Div</div>
				<div class="content_child">第四个Div</div>
				<div class="content_child">第伍个Div</div>
			</div>
		</div>
		
		
	</body>
	<script type="text/javascript">
		
		$(".lis").on("click", function() {
			$(this).addClass("lischeck") //添加选中状态
				.siblings().removeClass("lischeck");

			$($("#content").children(1)[$(this).data("menu")]).show() //对应子菜单显示
				.siblings().hide();
		});
	</script>
</html>
